<!--文本输入框-->
<template>
  <div class="content-text">
    <div class="name">{{ title }}</div>
    <el-input
      v-if="type !== 'richText'"
      v-model="value"
      :placeholder="`${PLEASE_ENTER}${title}`"
      autofocus
      :type="type"
      :rows="rows"
      min="1"
      max="100"
      autosize
      step="1"
      maxlength="500"
      show-word-limit
    >
    </el-input>
    <quillEditor v-else v-model:value="value" v-model:cssId="cssId"></quillEditor>
  </div>
</template>

<script setup>
const PLEASE_ENTER = "请输入"; //输入框的提示语前缀
import quillEditor from "@/components/FormComponents/quillEditor.vue";
const props = defineProps({
  //输入框类型
  type: {
    type: String,
    default: "text",
  },
  //标题
  title: {
    type: String,
    required: true,
  },
  //行数
  rows: {
    type: Number,
    default: 1,
  },
  //输入框值
  ordinalValue: {
    type: String,
    default: "",
    required: false,
  },
});
//富文本值
const value = defineModel("value", {
  type: String,
  required: true,
});
//样式ID
const cssId = defineModel("cssId", {
  type: String,
  required: false,
});
</script>

<style scoped lang="less">
.content-text {
  padding: 20px 0;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  :deep(.el-input) {
    width: 100%;
    height: @InputHeight;
    font-size: 14px;
  }
  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: @InputHeight!important;
    }
  }
}
</style>
